<template>
	<view class="leafletPopup pt-20px pb-30px relative bg-white">
		<so-marquee :dataList="jsonData" :showNumber="1" :speed="3000" class="my-ui-marque" v-slot="slotProps">
			<view class="flex flex-x-center flex-y-center text-24px">
				<uv-avatar :src="slotProps.data.src" :size="40"></uv-avatar>
				<text class="ml-20px">抢购成功</text>
			</view>
		</so-marquee>

		<view class="pl-20px mt-20px">
			<view class="flex pr-30px pb-30px">
				<!-- <view>
					已选
					<text class="color-pink">
						{{state.schoolZone.reduce((accumulator, item) => accumulator + item.checkboxValue.length, 0)}}
					</text>
					商品,
				</view> -->
				<view class="ml-10px flex flex-1 flex-x-between">
					<view>应付金额<text class="color-pink">{{detailData.price}}</text>元</view>
					<view>还可勾选<text class="color-pink">{{detailData.classNum - state.classid.length}}</text>条</view>
				</view>
			</view>
		</view>

		<view class="px-20px py-10px max-height">
			<uv-checkbox-group v-model="state.classid" @change="handleMulClass" :customStyle="{'width':'100%'}">
				<view class="mb-20px" style="width: 100%;" v-for="(item,index) in detailData.productSkuTree"
					:key="`main-${index}`">
					<view class="title px-20px py-10px mb-20px color-white rounded-10px">
						{{item.name}}
					</view>
					<!-- <uv-radio-group v-model="state.classid">
					<uv-radio :customStyle="{margin: '8px'}" v-for="(item, index) in item.children" :key="index"
						:label="item.name" :name="item.id">
					</uv-radio>
				</uv-radio-group> -->
					<view class="flex flex-wrap">
						<uv-checkbox :customStyle="{margin: '8px'}" v-for="(subitem, subindex) in item.children"
							:key="`ck-${subindex}`" :label="subitem.name" :name="subitem.id" :disabled="subitem.disabled">
						</uv-checkbox>
					</view>

				</view>
			</uv-checkbox-group>
		</view>

		<view class="content px-20px bg-white">
			<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
				<view class="w-100px text-28px text-center">类型:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1" @click="showActions">
					<uv-input v-model="state.type_name" readonly border="none" placeholder="请选择会员类型"
						suffixIcon='arrow-down' class="rounded-20px">
					</uv-input>

				</view>
			</view>


			<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
				<view class="w-100px text-28px text-center">年龄:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.age" border="none" placeholder="请输入年龄" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
				<view class="w-100px text-28px text-center">姓名:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.userName" border="none" placeholder="请输入姓名" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="border flex flex-y-center px-20px py-10px mb-30px rounded-50px">
				<view class="w-100px text-28px text-center">电话:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.phone" border="none" placeholder="请输入电话" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<uv-action-sheet ref="actionsRef" :actions="state.actions" @select="selectAction"></uv-action-sheet>
		</view>

		<view class="mt-30px rounded-50px flex flex-x-center">
			<view class="leafletBtn w-500px h-130px leading-100px text-center text-50px" @click="submit">
				立即支付
			</view>
		</view>

		<uv-notify ref="notify"></uv-notify>
	</view>
</template>

<script setup name='JoinPopup'>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		createOrder
	} from '/http/index.js';
	import soMarquee from './../../components/Scroll.vue'
	import {
		login
	} from '../../http';
	import {
		colorGradient
	} from '../../uni_modules/uv-ui-tools/libs/function/colorGradient';
	const props = defineProps({
		// 列表数据
		detailData: {
			default: () => {
				return {};
			},
			type: Object,
		},
	})

	const emits = defineEmits(['select'])
	const jsonData = ref([{
			id: 1,
			name: "李璐",
			src: 'https://via.placeholder.com/200x200.png/2878ff',
			date: "2020-02-01"
		},
		{
			id: 2,
			name: "张平",
			src: 'https://cdn.uviewui.com/uview/album/3.jpg',
			date: "2020-02-02"
		},
		{
			id: 3,
			name: "王奕斐",
			src: 'https://cdn.uviewui.com/uview/album/3.jpg',
			date: "2020-02-03"
		},
	])
	const actionsRef = ref()

	const state = reactive({
		schoolZone: [{
			shoolName: '车河校区',
			checkboxValue: [],
			checkboxList: [{
				name: '硬笔书法 (6-12岁)',
				disabled: false,
				price: 100,
			}, {
				name: '软笔书法 (6-12岁)',
				disabled: false,
				price: 120,
			}],
		}, {
			shoolName: '星海校区',
			checkboxValue: [],
			checkboxList: [{
				name: '篮球 (4-10岁)',
				disabled: false,
				price: 120,
			}, {
				name: '书法 (6-12岁)',
				disabled: false,
				price: 120,
			}],
		}],
		age: '',
		userName: '',
		phone: '',
		type: '',
		type_name: '',
		classid: [],
		actions: [{
				name: '新会员',
				value: '0'
			},
			{
				name: '老会员',
				value: '1'
			},
		],
	})

	// 如果等于限制勾选条数，禁用
	const handleMulClass = (vals) => {
		emits('select', vals)
	}

	const showActions = () => {
		actionsRef.value.open();
	}
	const selectAction = (e, index) => {
		state.type = e.value;
		state.type_name = e.name;
}

	const notify = ref()
	const submit = () => {
		if (state.classid.length === 0) {
			uni.showToast({
				title: '请选择科目',
				duration: 1000,
				icon: 'none'
			});
			return
		}
		// 提交再判断是否大于限制勾选条数
		if (state.classid.length > props.detailData.classNum) {
			uni.showToast({
				title: `选择的科目不能大于${props.detailData.classNum}`,
				duration: 1000,
				icon: 'none'
			});
			return
		}
		if (!state.type) {
			uni.showToast({
				title: '请选择学生类型',
				duration: 1000,
				icon: 'none'
			});
			return
		}
		if (!state.age) {
			uni.showToast({
				title: '请输入年龄',
				duration: 1000,
				icon: 'none'
			});
			return
		}
		if (!state.userName) {
			uni.showToast({
				title: '请输入姓名',
				duration: 1000,
				icon: 'none'
			});
			return
		}
		if (!state.phone) {
			uni.showToast({
				title: '请输入电话号码',
				duration: 1000,
				icon: 'none'
			});
			return
		}
		uni.showLoading({
			mask: true,
		});
		createOrder({
			productId: props.detailData.id,
			classId: state.classid.join(','),
			studentType: state.type,
			age: state.age,
			name: state.userName,
			phone: state.phone,
			price: props.detailData.price,
		}).then(res => {
			if (res.result == 0) {
				uni.hideLoading()
				uni.showToast({
					title: '订单创建失败',
					duration: 1000,
					icon: 'none'
				});
			} else if (res.result == 1) {
				uni.requestPayment({
					provider: "wxpay",
					timeStamp: res.payParam.timeStamp, // 时间戳（单位：秒）
					nonceStr: res.payParam.nonceStr, // 随机字符串
					package: res.payParam.package, // 固定值
					signType: res.payParam.signType, //签名算法，
					paySign: res.payParam.paySign, // 签名，这里用的 MD5/RSA 签名
					success(ress) {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pagesPoster/Leaflet/PaySuccess'
						})
					},
					fail(err) {
						uni.hideLoading()
						uni.showToast({
							title: err,
							duration: 1000,
							icon: 'none'
						})
					}
				})
			} else {
				uni.hideLoading()
				uni.showToast({
					title: '参数错误',
					duration: 1000,
					icon: 'none'
				});
			}

		}).catch(err => {
			uni.hideLoading()
			uni.showToast({
				title: err.data.error.message,
				duration: 1000,
				icon: 'none'
			});
		})
	}
</script>

<style scoped lang="scss">
	.leafletPopup {
		border-radius: 40rpx 40rpx 0 0;
	}

	.content {}

	.customer {
		border-radius: 50rpx 0 0 50rpx;
		background: #ffedbe;
	}

	.line {
		width: 1px;
		height: 30rpx;
		background: #dedede;
	}

	:deep(.uv-form-item__body__left__content__label) {
		justify-content: center !important;
	}

	:deep(.uv-checkbox-label--left) {
		margin-right: 30rpx !important;
	}

	.border {
		border: 1px solid #e8dad2;
	}

	.title {
		background: rgb(26, 28, 53);
	}

	.leafletBtn {
		color: #d8592e;
		background: url(../static/leafLet/leaflet-btn.png) no-repeat;
		background-size: 100%;
		animation: fontMove 1s infinite forwards;
	}

	@keyframes fontMove {
		0% {
			font-size: 45rpx;
		}

		100% {
			font-size: 43rpx;
		}
	}
	.max-height{
		max-height: 600rpx;
		overflow-y: scroll;
	}
</style>